<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import { stuLogin, userLogin } from '@/api/user.js'
	import store from '@/store/index.js'
	import cookie from '../../store/cookie';
	import { userInfo } from '@/store/Pinia/userInfo.js'
	import { Clear } from "@/common/Func.js"
	import { settingConfig } from '@/config/setting.config.js'


	// 学生登录账号 sfzz2023102604 
	let account = ref();
	let password = ref();
	const tenantId = ref('')
	const userInfoModel = userInfo()

	const passwordShow = ref(false)
	const isShowPassword = () => {

	}

	onMounted(() => {
		// cookie.clearAll()
		Clear()
		userInfoModel.$reset()
		// #ifndef APP
		getSchoolInfo();
		// #endif


	})



	const getSchoolInfo = () => {
		// let item = {
		// 	domain: schoolDomain
		// }
		// let dom = uni.getStorageSync('domain')
		// if (dom != undefined && dom != '' && dom != null) {
		// 	item.domain = dom
		// }
		// // tenantId.value = uni.getStorageSync('tenantId') ?? ''

		// schBaseInfo(item).then((res) => {
		// 	tenantId.value = uni.getStorageSync('tenantId')

		// })

	}

	function login() {

		let item = {
			account: account.value,
			pwd: password.value,
			tenantId: tenantId.value
		}
		item.tenantId = uni.getStorageSync('tenantId');
		// #ifdef APP
		item.tenantId = uni.getStorageSync('tenantId');
		// #endif
		userLogin(item).then(res => {
			if (res.data.code == 200) {
				console.log('setUserInfo', res.data.data)
				// userInfoModel.data = { i: 1 }
				userInfoModel.data = res.data.data[0].authUserList[0].auth
				cookie.setToken(res.data.data[0].authUserList[0].token)
				store.commit('setUserInfo', res.data.data[0].authUserList[0].auth);
				store.commit('setIndentity', res.data.data[0].authUserList[0].sysRole);
				uni.navigateTo({
					url: '/pages/index/home/home',
					animationType: 'none'
				})
				console.log('成功登录')
			}
		})

	}

	const tell = () => {
		uni.showToast({
			icon: 'error',
			title: ' 请联系班级老师 ',
			duration: 2000
		});
	}

	const back = () => {
		uni.reLaunch({
			url: '/pages/index/home/home',

		})
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<articleTable ref="timer"></articleTable>
	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" @clickLeft="back"
		customLeft class="absolute" style="top: 0;">
	</Navigator>
	<!-- 最外层 -->
	<view @touchend="handleEnd"
		style="background: linear-gradient(90deg, #49BEFF 0%, #3186FC 100%);width: 100%;height: 100vh;display: flex;overflow: scroll;">

		<!-- 主体 -->
		<view class="box">
			<!-- loGO -->
			<view style="width: 50%;height: 100%;background: url(/static/img/defaultArticle.jpg);background-size: cover; border-radius: 20px 0 0 20px;">
			</view>
			<!-- 登录块 -->
			<view style="width: 50%;">
				<view
					style="padding: 1% 0 2% 15%;display: flex;height:100%;flex-direction: column; justify-content: center; flex-shrink: 0;">
					<view style="display: flex;align-items: center;justify-content: flex-start;">
						<image v-if="settingConfig.bgIcon!=null" src="@/static/img/loginLogo.svg"
							style="height: 80px;width: 80px;margin-right: 15px;" />
						<view
							style="display: flex; margin-left: 10px;  justify-content: center; text-align: center;flex-direction: column;align-items: flex-start;margin-top: 5px;">
							<text class="login-box-title">
								登录
							</text>
							<text
								style="color: #348BFD;text-align: center; font-size: 20px; line-height: 20px;margin-top: 5px;">治愈心灵拥有孩童快乐</text>
						</view>
					</view>
					<!-- 输入账号 -->
					<view class="flex-around login-input-box" style="	margin-top: 50px;">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"
							style="margin-right: 10px;">
							<path
								d="M17.25 7.98755C17.25 10.887 14.8995 13.2375 12 13.2375C9.1005 13.2375 6.75 10.887 6.75 7.98755C6.75 5.08805 9.1005 2.73755 12 2.73755C14.8995 2.73755 17.25 5.08805 17.25 7.98755ZM15.75 7.98755C15.75 5.91648 14.0711 4.23755 12 4.23755C9.92893 4.23755 8.25 5.91648 8.25 7.98755C8.25 10.0586 9.92893 11.7375 12 11.7375C14.0711 11.7375 15.75 10.0586 15.75 7.98755Z"
								fill="black" fill-opacity="0.4" />
							<path
								d="M20.9447 16.7667C21.4455 17.0059 21.75 17.5195 21.75 18.0745V21.4875C21.75 21.9018 21.4142 22.2375 21 22.2375H3C2.58579 22.2375 2.25 21.9018 2.25 21.4875V18.0745C2.25 17.5195 2.55452 17.0059 3.0553 16.7667C5.7741 15.4682 8.79976 14.7375 12 14.7375C15.2002 14.7375 18.2259 15.4682 20.9447 16.7667ZM12 16.2375C9.05011 16.2375 6.26152 16.9061 3.75 18.0973V20.7375H20.25V18.0973C17.7385 16.9061 14.9499 16.2375 12 16.2375Z"
								fill="black" fill-opacity="0.4" />
						</svg>
						<input style="display: flex;align-items: center; flex: 1 0 0;" placeholder="请输入账号" type="text"
							name="account" v-model="account" />
					</view>
					<!-- 输入密码 -->
					<view class="flex-between login-input-box">
						<view class="flex">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25"
								fill="none" style="margin-right: 10px;">
								<path d="M9 15.4876V16.9876H15V15.4876H9Z" fill="black" fill-opacity="0.4" />
								<path
									d="M6.75 7.97388V9.48759H4.5C4.08579 9.48759 3.75 9.82337 3.75 10.2376V20.7376C3.75 21.1518 4.08579 21.4876 4.5 21.4876H19.5C19.9142 21.4876 20.25 21.1518 20.25 20.7376V10.2376C20.25 9.82337 19.9142 9.48759 19.5 9.48759H17.25V7.97388C17.25 5.07438 14.8995 2.72388 12 2.72388C9.10051 2.72388 6.75 5.07438 6.75 7.97388ZM15.75 9.48759H8.25V7.97388C8.25 5.90281 9.92893 4.22388 12 4.22388C14.0711 4.22388 15.75 5.90281 15.75 7.97388V9.48759ZM5.25 10.9876H18.75V19.9876H5.25V10.9876Z"
									fill="black" fill-opacity="0.4" />
							</svg>
							<input placeholder="请输入密码" :type="passwordShow? 'text':'password'" name="password"
								v-model="password" />
						</view>
						<u-icon :name="passwordShow?'eye-fill':'eye-off'" color="#676767" size="18"
							@tap="passwordShow = !passwordShow"></u-icon>
					</view>
					<!-- 忘记密码 -->
					<text
						style="color: var(--text-icon-font-gy-260-secondary, rgba(0, 0, 0, 0.60)); font-size: 16px; font-weight: 400; line-height: 20px; margin-top: 15px; margin-bottom: 15px;margin-right: 55%;"
						@click="tell"> 忘记密码</text>

					<button @click="login"
						style="  width: 80%; padding:5px; border-radius: 6px;background: linear-gradient(90deg, #49BEFF 0%, #3186FC 100%), linear-gradient(318deg, #00C572 9.15%, #34DD96 109.02%);margin-left: 0;">
						<text
							style="color: rgba(255, 255, 255, 0.90);text-align: center; font-size: 24px;  line-height: 20px;">登录</text>
					</button>
				</view>
			</view>
		</view>

	</view>
</template>


<style scoped>
	.box {
		display: flex;
		width: 50%;
		height: 60vh;
		background-color: white;
		margin: auto;
		border-radius: 20px;
		display: flex;
		/* justify-content: flex-start; */
		/* align-items: flex-start; */
		flex-shrink: 0;
		box-shadow: 2px 4px 14px 0px rgba(0, 0, 0, 0.20);
		min-width: 800px;
		min-height: 500px;
	}

	/* html {
		height: 100%;
	} */

	body {
		/* min-height: 100%; */
		min-height: 100vh;
	}

	.back {
		color: white;
		font-size: 32rpx;
		margin-left: 15rpx;
	}

	.login-container {
		height: 100%;
		min-height: 600px;
		width: 100%;
		background-image: url('@/static/img/loginBg.png');
		background-size: cover;
		background-position: center;
	}

	.login-logo {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.login-box {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.login-wrapper {
		/* background-color: #fff; */
		width: 40%;
		min-width: 400px;
		height: 70vh;
		border-radius: 15px;
		padding: 0 50px;
		min-height: 500px;
		background: rgba(255, 255, 255, 0.90);

		box-shadow: 0px 4px 20px 0px rgba(65, 122, 231, 0.10);
		backdrop-filter: blur(21px);
	}

	.login-input-box {
		border-radius: 12px;
		margin-bottom: 25px;

		border: 1px solid var(--Gray-Gray4-, #DCDCDC);
		background: rgba(0, 0, 0, 0.08);
		display: flex;
		padding: 20px 15px;
		align-items: center;
		flex-shrink: 0;
		width: 80%;
	}

	.header {
		font-size: 3rem;
		font-weight: bold;
		text-align: center;
		line-height: 200px;
	}

	.input-item {
		display: block;
		width: 80%;
		height: 23%;

		margin-left: 15%;
		border-radius: 40rpx;
		margin-bottom: 10px;
		border: 0;
		padding: 5px 24px;
		border: 1px solid rgb(128, 125, 125);
		font-size: 1rem;
		/* outline: none; */
	}

	.input-item:placeholder {
		text-transform: uppercase;
	}

	.login-btn {
		text-align: center;
		padding: 10px;
		margin: 0 auto;
		width: 80%;
		padding: 5px 24px;
		;
		background-image: linear-gradient(to right, #f6942a, #f8de15);
		margin-left: 15%;
		color: #fff;
		font-size: 1rem;
		border-radius: 10px;
	}

	.login-btn:active {
		background-image: linear-gradient(to right, #ea9029, #eed516);

	}

	.msg {
		text-align: center;
		line-height: 88px;
	}

	a {
		text-decoration-line: none;
		color: #abc1ee;
	}

	.login-box-title {
		color: #348BFD;
		text-align: center;
		font-family: PingFang SC;
		font-size: 26px;
		font-style: normal;
		font-weight: 600;
		line-height: 32px;
	}
</style>